<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/js/skin/laypage.css">
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/jQery-3.6.0.min.js"></script>
    <script type="text/javascript" src="/js/laypage.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3" id="app">
    <table class="table table-hover" id="table">
        <thead>
        <tr>
            <th>街道id</th>
            <th>街道名称</th>
            <th>所属区域</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in result">
            <td>{{item.streetId}}</td>
            <td>{{item.streetName}}</td>
            <td>{{item.district.districtId}}</td>
            <td>
                <a href="" class="btn btn-primary" @click="detailE(item.streetId)">修改</a>
                <a href="" class="btn btn-primary"  >删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div align="center" class="pages" id="doctorDiv">
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            result: []
        },
        methods:{
            detailE(id){
                alert(id)
                layer.open({
                    type: 2,
                    title: "详情",
                    fix: false,
                    maxmin: true,
                    shadeClose: true,
                    area: ['90%', '90%'],
                    content: '/user/detail.do?id=' + id,
                    end:function (){

                    }
                });
            }
        }
    });
    $(function () {
        search(1);
    });
    function search(curr) {
        $.ajax({
            type: "get",
            url: "/user/list.do",
            dataType: "json",
            data: {pageIndex:curr || 1},
            success: function (data) {
                app.result=data.pageInfo.list;
                laypage({
                    cont: 'doctorDiv',  //分页需要显示的地方
                    pages: data.pageInfo.pages,    //总页数
                    curr: data.pageInfo.pageNum,     //当前页
                    groups: 3,//连续显示分页数
                    skip: true,     //是否开启跳页
                    first: '首页',
                    last: '尾页',
                    skin: 'molv',   //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
                    prev: '<', //若不显示，设置false即可
                    next: '>', //若不显示，设置false即可
                    jump: function(e, first) {
                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                            search(e.curr); // (被单击的页码)
                        }
                    }
                });
            }
        });
    }
</script>
</html>